<template>
  <view>
    <navigation back title="匠人入驻" />

    <view class="page-container">
      <view class="container">
        <view class="line flex flex-middle flex-between">
          <view class="title flex flex-middle">
            姓名
            <text>*</text>
          </view>
          <input class="flex-1" placeholder="请输入姓名" v-model="name" />
        </view>

        <view class="line flex flex-middle">
          <view class="title flex flex-middle">
            手机号
            <text>*</text>
          </view>
          <input
            class="flex-1"
            placeholder="请输入手机号"
            type="number"
            maxlength="11"
            v-model="mobile"
          />
        </view>

        <view class="line flex flex-middle flex-between">
          <view class="title flex flex-middle">
            验证码
            <text>*</text>
          </view>
          <input
            class="flex-1"
            placeholder="请输入验证码"
            type="number"
            maxlength="6"
            v-model="code"
          />
          <view class="get-code flex flex-middle flex-center" @click="getCode">
            <text v-if="!sendCodeLoad && expireTime == null && !again">
              获取验证码
            </text>

            <u-loading-icon v-else-if="sendCodeLoad" />

            <text style="color: #999" v-else-if="!again">
              重新获取（{{ expireTime }}s）
            </text>

            <text v-else>重新发送</text>
          </view>
        </view>

        <view class="btn flex flex-middle flex-center" @click="submit">
          提交
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { sendCode } from "@/api/common";
import { joinCraftsman } from "@/api/craftsman";

export default {
  data() {
    return {
      sendCodeLoad: false,
      expireTime: null,
      mobile: "",
      code: "",
      again: false,
      timer: null,
      name: "",
    };
  },
  computed: {
    ...mapGetters(["codeEndTime"]),
  },
  onLoad() {
    if (this.codeEndTime) this.checkTime();
  },
  methods: {
    async submit() {
      if (!this.name) return this.$toast("请输入您的姓名");
      if (!uni.$u.test.mobile(this.mobile + ""))
        return this.$toast("请输入正确的手机号");
      if (!uni.$u.test.code(this.code + ""))
        return this.$toast("请输入正确的验证码");
      // 验证通过
      this.$loading();
      const { data } = await joinCraftsman({
        code: this.code,
        phone: this.mobile,
        realName: this.name,
      });
      this.$loading.close();
      if (!data) return;
      await this.$dialog({
        content: "提交成功，请保持手机畅通并等待工作人员联系",
      });
      this.$navigateBack();
    },
    async getCode() {
      if (this.sendCodeLoad || this.expireTime !== null) return;
      if (!uni.$u.test.mobile(this.mobile + ""))
        return this.$toast("请输入正确的手机号");
      // 验证通过
      this.again = false;
      this.sendCodeLoad = true;
      const { data } = await sendCode({ phone: this.mobile + "" });
      this.sendCodeLoad = false;
      if (!data) return;
      this.expireTime = +data.expireTime;
      this.$store.dispatch("saveCodeEndTime", +data.expireTime);
      this.startTime();

      // 测试
      this.code = data.code;
    },
    startTime() {
      this.timer = setInterval(() => {
        this.expireTime--;
        if (!this.expireTime) {
          this.expireTime = null;
          this.again = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },
    checkTime() {
      const now = new Date() * 1;
      if (this.codeEndTime > now) {
        this.expireTime = ((+this.codeEndTime - now) / 1000).toFixed(0);
        this.startTime();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.btn {
  width: 248px;
  height: 42px;
  background: #31bc4e;
  border-radius: 21px;
  margin: 24px auto 0;
  color: #fff;
  font-weight: bold;
}

.line {
  height: 50px;
  border-bottom: 1px solid #d9d9d9;

  .get-code {
    width: 120px;
    height: 100%;
    border-left: 1px solid #d9d9d9;
    color: #232323;
    color: #31bc4e;
  }

  .title {
    font-size: 16px;
    color: #232323;
    width: 70px;

    text {
      margin-left: 2px;
      color: #fe774c;
    }
  }

  input {
    font-size: 14px;
    height: 100%;
  }
}

.container {
  padding: 0 16px;
}
</style>